<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $div = $('#div01'),
            $p01 = $('#p01'),
            $p02 = $('#p02'),
            $h01 = $('#h01');

            // 当前元素里面的后面要放另一个元素
            // $div.append($p01);

            // 当前元素放到另一个元素里面的后面
            $p01.appendTo($div);

            // 当前元素里面的前面要放另一个元素
            // $div.prepend($h01);

            // 当前元素放到另一个元素里面的前面
            $h01.prependTo($div);

            // 当前元素外面的后面要放另一个元素
            // $div.after($p02);

            // 当前元素放到另一个元素外面的后面
            $p02.insertAfter($div);
            
            // 创建一个新的 空的div标签
            var $newdiv01 = $('<div>');

            // 创建一个有内容的div标签
            var $newdiv02 = $('<div>wdnmd</div>')

            // 当前元素外面的前面要放另一个元素
            $div.before($newdiv01);

            // 当前元素放到另一个元素外面的前面
            $newdiv02.insertBefore($div);

            // 删除标签
            $newdiv01.remove();
            $h01.remove();
        })
    </script>
</head>
<body>
    <p id="p01">p1p1p1p1p1p1p1</p>
    <p id="p02">p3p3p3p3p3p3p3</p>
    <h1 id="h01">h1h1h1h1h1h1</h1>
    <div id="div01">
        <h3>h3h3h3h3h3h3</h3>
        <p>p2p2p2p2p2p2p2</p>
    </div>
</body>
</html>